<script setup>
import { ref, computed, watch, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import pinia from '@/stores';

// 菜单数据
const menuList = [
  { path: '/', title: '指挥大屏', icon: 'command' },

];

const route = useRoute();
const activeMenu = computed(() => route.path);

// 动态缩放适配
const handleResize = () => {
  const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
  document.documentElement.style.setProperty('--scale-ratio', scale);
};

watch(() => route.path, () => {
  // 当路由变化时，确保滚动到顶部
  window.scrollTo(0, 0);
});

// 监听窗口变化
window.addEventListener('resize', handleResize);
handleResize(); // 初始化

// 组件卸载时清理事件监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <div class="app">
    <!-- 主内容区 -->
    <div class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style>
:root {
  --scale-ratio: 1;
  --primary-color: #00e473;
  /* --bg-color: #0f1642; */
  --card-bg: rgba(0, 0, 0, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止滚动条 */
}

body {
  font-family: 'Arial', 'Microsoft YaHei', sans-serif;
  background-color: var(--bg-color);
  background-image: linear-gradient(135deg, #0f1642 0%, #163a7c 100%);
  color: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.app {
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.main-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 确保在各种分辨率下都能正常显示 */
@media screen and (min-width: 1920px) {
  html {
    font-size: 16px;
  }
}

@media screen and (max-width: 1600px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 1366px) {
  html {
    font-size: 13px;
  }
}

@media screen and (max-width: 1200px) {
  html {
    font-size: 12px;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 195, 255, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 195, 255, 0.5);
}


</style>
